<template>
  <el-pagination
    layout="total, sizes, prev, pager, next, jumper"
    :page-sizes="[2, 4, 6]"
    :total="listCount"
    :current-page="props.page"
    :page-size="props.limit"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script lang="ts" setup>
import { PropType } from '@vue/runtime-core'
const props = defineProps({
  page: { // 当前页码
    type: Number,
    default: 1
  },
  limit: { // 每页条数
    type: Number,
    default: 10
  },
  listCount: { // 总数
    type: Number,
    default: 0
  },
  loadList: { // 查询
    type: Function,
    default: () => {}
  },
  obj: {
    type: Object as PropType<{a: string, b: number}>,
    required: true
  }
})

// interface propsType {
//   page: number,
//   limit: number,
//   listCount: number,
//   loadList: () => void
// }

// // const props = defineProps<propsType>()
// const props = withDefaults(defineProps<propsType>(), { // 指定默认值
//   page: 1,
//   limit: 10,
//   listCount: 0,
//   loadList: () => {}
// })

interface EmitsType {
  (e: 'update: page', page: number):void
  (e: 'update: limit', limit: number):void
}

// const emit = defineEmits(['update: page', 'update: limit'])
const emit = defineEmits<EmitsType>()

const handleSizeChange = (size: number) => { // 每页条数
  emit('update: page', 1)
  emit('update: limit', size)
  props.loadList()
}

const handleCurrentChange = (page: number) => { // 当前页数
  emit('update: page', page)
  props.loadList()
}
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
